<template>
	<view class="newgoods-detail-area">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots autoplay="true" interva="100" duration="500">
				<swiper-item v-for="item in gallery" :key="item.id">
					<view class="swiper-item uni-bg-red"><image :src="item.img_url" mode="widthFix"></image></view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 顶部描述 -->
		<view class="detail-top">
			<view class="top-item"><u-icon name="checkbox-mark" color="#aa0000" size="14" label="30天无忧退货" label-size="12"></u-icon></view>
			<view class="top-item"><u-icon name="checkbox-mark" color="#aa0000" size="14" label="48小时快速退费" label-size="12">48小时快速退费</u-icon></view>
			<view class="top-item"><u-icon name="checkbox-mark" color="#aa0000" size="14" label="满88元免邮" label-size="12">满88元免邮</u-icon></view>
		</view>

		<!-- 点击商品详情 -->
		<view class="shop-item-area">
			<view class="item-area-name">{{ info.name }}</view>
			<view class="item-area-message">{{ info.goods_brief }}</view>
			<view class="item-area-price">￥ {{ info.retail_price.toFixed(2) }} 元</view>
		</view>

		<!-- 弹出层 -->
		<view class="showmark">
			<view class="left">展示弹出层</view>
			<u-icon name="arrow-right"></u-icon>
		</view>

		<!-- 商品参数 -->
		<view class="shop-param">
			<view class="shop-param-title">商品参数</view>
			<view class="param-box" v-for="item in attribute" :key="item.id">
				<view class="param-box-name">{{ item.name }}</view>
				<view class="param-box-value">{{ item.value }}</view>
			</view>
		</view>

		<!-- 常见问题 -->
		<view class="shop-questions">
			<view class="ques-title">
				<view class="c-box"></view>
				<view class="text">常见问题</view>
			</view>
			<view class="que-item">
				<ul>
					<li v-for="item in issue" :key="item.id">
						<view class="q-item-title">{{ item.question }}</view>
						<view class="q-item-text">{{ item.answer }}</view>
					</li>
				</ul>
			</view>
		</view>

		<!-- 相关商品 -->
		<view class="shop-about-area">
			<view class="shop-about-title">相关商品</view>
			<GoodsList :chilGoodsList="goodsList"></GoodsList>
		</view>
	</view>
</template>

<script>
import { ApiGoodsDatil, ApiGoodsRelated } from '@/utils/api.js'
import GoodsList from '@/custom-tab-bar/GoodsList.vue'
export default {
	components: { GoodsList },
	data() {
		return {
			// 商品id
			did: '',
			// 轮播图数据
			gallery: [],
			// 商品介绍信息
			info: {},
			// 参数介绍
			attribute: [],
			// 问题
			issue: [],
			goodsList: []
		}
	},
	async onLoad(options) {
		console.log(options.id)
		this.did = options.id
		let res = await ApiGoodsDatil(this.did)
		let res1 = await ApiGoodsRelated(this.did)
		this.goodsList = res1.data.goodsList
		if (res.errno == 0) {
			let { gallery, info, attribute, issue } = res.data
			this.gallery = gallery
			this.info = info
			this.attribute = attribute
			this.issue = issue
		}
		console.log(res1)
	},
	methods: {}
}
</script>

<style lang="scss">
.newgoods-detail-area {
	background-color: #efefef;
	height: 5000rpx;
}
// 轮播图
.uni-margin-wrap {
	width: 750rpx;
	.swiper {
		width: 100%;
		height: 750rpx;
		image {
			width: 100%;
		}
	}
}

// 顶部描述
.detail-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60rpx;

	.top-item {
		padding: 0rpx 13rpx;
	}
}

// 商品详情介绍
.shop-item-area {
	text-align: center;
	padding: 40rpx;
	background-color: white;
	border-bottom: 2px solid #ebedf0;
	box-sizing: border-box;
	.item-area-name {
		font-size: 40rpx;
		padding: 20rpx;
	}
	.item-area-message {
		font-size: 28rpx;
		padding: 20rpx;
	}
	.item-area-price {
		font-size: 28rpx;
		padding: 20rpx;
		color: #bb0000;
	}
}

// 展示弹出层
.showmark {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 88rpx;
	background-color: white;
	padding: 0 30rpx;
	margin-bottom: 40rpx;
}

// 商品参数
.shop-param {
	background-color: white;
	padding-bottom: 20rpx;
}
.shop-param-title {
	margin: 0 auto;
	width: 710rpx;
	line-height: 80rpx;
	font-size: 40rpx;
}
.param-box {
	width: 710rpx;
	margin: 10rpx auto;
	height: 60rpx;
	border-radius: 16rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	background-color: #efefef;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	.param-box-name {
		width: 180rpx;
		color: #999999;
		padding-left: 10rpx;
	}
	.param-box-value {
		flex: 1;
	}
}

// 常见问题
.shop-questions {
	margin-top: 40rpx;
	background-color: white;
	padding-bottom: 20rpx;
	.ques-title {
		position: relative;
		text-align: center;
		height: 80rpx;
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.que-item {
		.q-item-title {
			font-size: 32rpx;
			margin: 0 10rpx 20rpx;
		}
		.q-item-text {
			font-size: 28rpx;
			color: #666666;
			margin: 0 10rpx 20rpx;
		}
	}
}

// 相关商品

.shop-about-area {
	background-color: white;
	.shop-about-title {
		height: 80rpx;
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
